import { FC } from "react";
import useStore from "@/store";

export const Father: FC = () => {
  const brears = useStore((state) => state.bears);
  return (
    <>
      <h3>Father 组件</h3>
      <p>Bears: {brears}</p>
      <hr />
      <Son />
    </>
  );
};

const Son: FC = () => {
  const incrementBears = useStore((state) => state.incrementBears);
  const resetBears = useStore((state) => state.resetBears);
  const decrementBearsByStep = useStore((state) => state.decrementBearsByStep);
  const asyncIncrementBears = useStore((state) => state.asyncIncrementBears);
  return (
    <>
      <h5>Son1 组件</h5>
      <button onClick={incrementBears}>bears + 1</button>
      <button onClick={resetBears}>reset bears</button>
      <button onClick={() => decrementBearsByStep(3)}>decrement bears</button>
      <button onClick={asyncIncrementBears}>async add 1</button>
    </>
  );
};
